<template>
  <div>
    <el-dialog
      title="流程选择"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="60%"
    >
      <el-radio-group
        v-model="radio"
        @change="getData(1)"
        style="margin: 16px 0"
      >
        <el-radio label="0">我的任务</el-radio>
        <el-radio label="1">抄送我的</el-radio>
      </el-radio-group>
      <el-input
        v-model="queryParam.procDefName"
        prefix-icon="el-icon-search"
        placeholder="请输入流程名称并按下回车键进行筛选"
        @keyup.enter.native="getData(1)"
      />
      <div class="tagRow">
        <span style="padding-right: 20px"
          >已选择 <span style="color: #409eff">{{ ids.length }}</span> 项</span
        >
        <el-tag
          v-for="item in ids"
          v-show="item"
          :key="item"
          closable
          effect="dark"
          disable-transitions
          @close="handleTagClose(item)"
        >
          {{ nameMap[item] }}
        </el-tag>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        row-key="procInsId"
        max-height="500"
        style="width: 100%"
        @select="handleSelection"
        @select-all="handleSelectionAll"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="procInsId" label="任务编号" />
        <el-table-column prop="procDefName" label="流程名称" />
        <el-table-column prop="flowCategoryId" label="流程分类" />
        <el-table-column prop="createTime" label="部署时间" />
      </el-table>

      <div style="margin: 20px 0; display: flex; justify-content: flex-end">
        <el-pagination
          background
          :current-page="ipagination.current"
          :page-sizes="ipagination.pageSizeOptions"
          :page-size="ipagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ipagination.total"
          @size-change="
            (val) => {
              ipagination.pageSize = val;
              ipagination.current = 1;
              getData();
            }
          "
          @current-change="
            (val) => {
              ipagination.current = val;
              getData();
            }
          "
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    multi: {
      type: Boolean,
      default: false,
    },
    finishFlag: {
      type: Boolean,
      default: false,
    },
    nameMap: {
      type: Object,
      default: {},
    },
    // 已选中的id列表
    selectedIds: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      disableMixinCreated: true,
      dialogVisible: false,
      searchVal: "",
      tableData: [],
      ids: [],
      url: { list: ["/flowable/task/myProcessNew", "/flowable/flowCc/list"] },

      queryParam: {},
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "50", "100"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      radio: "0",
    };
  },
  watch: {
    dialogVisible: {
      handler(newV) {
        if (newV) {
          this.ids = [...this.selectedIds];
          this.ipagination.current = 1;
          this.getData();
        }
      },
    },
  },
  methods: {
    // 流程数据
    async getData(init) {
      if (init) {
        this.ipagination.current = 1;
      }
      let param = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        procDefName: this.queryParam.procDefName,
      };
      if (this.finishFlag) {
        param.finishFlag = "Y";
      }
      // todo
      this.tableData = [
        {
          id: 1,
          procInsId: "OA-1705383941164",
          procDefName: "监理日志",
          flowCategoryId: "项目流程",
          createTime: "2024-01-16 13:45:41",
        },
        {
          id: 2,
          procInsId: "OA-1704937794098",
          procDefName: "监理备忘录",
          flowCategoryId: "项目流程",
          createTime: "2024-01-16 13:45:41",
        },
        {
          id: 3,
          procInsId: "OA-1704937558760",
          procDefName: "监理报告",
          flowCategoryId: "项目流程",
          createTime: "2024-01-16 13:45:41",
        },
      ];
      this.ipagination.total = 10;
      const oldIds = [1];
      this.$nextTick(() => {
        // 选中回显
        this.tableData.forEach((row) => {
          if (this.ids.includes(row.procInsId)) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      });
    },
    handleTagClose(tag) {
      this.ids.splice(this.ids.indexOf(tag), 1);
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(
          this.tableData.find((item) => item.procInsId === tag),
          false
        );
        this.$forceUpdate();
      });
    },
    handleSelection(selection, row) {
      this.nameMap[row.procInsId] = row.procDefName;
      let ids = [];
      if (selection.find((item) => item.procInsId === row.procInsId)) {
        // 增
        if (this.multi) {
          ids = Array.from(new Set([...this.ids, row.procInsId + ""]));
        } else {
          this.$refs.multipleTable.clearSelection(); // 清除
          this.$refs.multipleTable.toggleRowSelection(row); // 最后一个
          ids = [row.procInsId];
        }
      } else {
        if (this.multi) {
          ids = this.arrDiff([...this.ids], [row.procInsId + ""]);
        } else {
          ids = [];
        }
        // 删
      }
      this.ids = ids;
    },
    handleSelectionAll(selection) {
      this.tableData.forEach((item) => {
        this.nameMap[item.procInsId] = item.procDefName;
      });
      let ids = [];
      if (selection.length > 0) {
        // 增
        if (this.multi) {
          ids = Array.from(
            new Set([
              ...this.ids,
              ...selection.map((item) => item.procInsId + ""),
            ])
          );
        } else {
          this.$refs.multipleTable.clearSelection(); // 清除
          this.$refs.multipleTable.toggleRowSelection(
            this.tableData[this.tableData.length - 1]
          ); // 最后一个
          ids = [this.tableData[this.tableData.length - 1].procInsId];
        }
      } else {
        // 删
        if (this.multi) {
          ids = this.arrDiff(
            [...this.ids],
            [...this.tableData.map((item) => item.procInsId + "")]
          );
        } else {
          ids = [];
        }
      }
      this.ids = ids;
    },
    arrDiff(arr1, arr2) {
      let newArr = [];
      arr1 = Array.from(new Set(arr1)); // 去重
      arr2 = Array.from(new Set(arr2)); // 去重
      newArr = arr1.concat(arr2);
      return newArr.filter((x) => !(arr1.includes(x) && arr2.includes(x)));
    },
    onConfirm() {
      this.dialogVisible = false;
      const arr1 = [...this.ids];
      const arr2 = arr1.map((item) => this.nameMap[item]);
      const obj = {
        names: arr2.length ? arr2.join(",") : "",
        ids: arr1.length ? arr1.join(",") : "",
      };
      this.$emit("onSelect", obj);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
.tagRow {
  margin: 10px 0;
  border-radius: 4px;
  background: #ecf5ff;
  border: 1px solid #409eff;
  padding: 4px 24px;
  > span {
    margin-right: 10px;
    margin-bottom: 2px;
  }
}
</style>
